<!--变更版本-->
<template>
  <el-dialog
    title="变更版本"
    :visible.sync="changeVersionDialogVisible"
    width="700px"
    :before-close="handleClose"
    :close-on-click-modal="false">
    <el-form label-width="86px" label-position="left">
      <el-col :span="24">
        <el-form-item label="固件名称">{{ changeVersionRows.name }}</el-form-item>
        <el-form-item label="当前版本号">{{ changeVersionRows.version }}</el-form-item>
      </el-col>
    </el-form>
    <h3>其他可用版本</h3>
    <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#F5F6F7' }" size="medium">
      <el-table-column prop="version" label="版本号"> </el-table-column>
      <el-table-column prop="criticalVersionFlag" label="关键版本">
        <template slot-scope="scope">
          <span v-if="scope.row.criticalVersionFlag">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="operate"
            @click="handleChoice(scope.row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>
  </el-dialog>
</template>
<script>
import { getChangeVersionList, changeVersion } from "@/api/product/firmware"
export default {
  name: "associatedFirmware",
  props: {
    changeVersionRows: {
      type: Object,
      default: () => { }
    },
    getFirmwareList: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      changeVersionDialogVisible: false, // 弹窗是否显示
      tableData: [], // 列表数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页条数
      total: 0 // 列表数据总条数
    }
  },
  watch: {
    changeVersionDialogVisible(val) {
      if (val) {
        this.queryChangeVersionList()
      }
    }
  },
  // created() {
  //   this.queryChangeVersionList()
  // },
  methods: {
    // 变更版本列表
    queryChangeVersionList() {
      this.loading = true
      const params = {
        productComponentRelationId: this.changeVersionRows.id,
        firmwareId: this.changeVersionRows.firmwareId,
        current: this.currentPage,
        size: this.pageSize
      }
      getChangeVersionList(params).then(res => {
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      }).catch(err => {
        this.$message.error(err.message)
      }).finally(() => {
        this.loading = false
      })
    },
    // 固件变更版本选择
    handleChoice(row) {
      const params = {
        productComponentRelationId: this.changeVersionRows.id,
        firmwareId: row.firmwareId
      }
      changeVersion(params).then(res => {
        this.getFirmwareList()
        this.$message.success('变更版本成功')
        this.changeVersionDialogVisible = false
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    // 新建固件弹窗关闭
    handleClose() {
      this.changeVersionDialogVisible = false
    },
    // 每页条数改变时触发
    handleSizeChange(val) {
      this.pageSize = val
      this.queryList()
    },
    // 当前页变时触发
    handleCurrentChange(val) {
      this.currentPage = val
      this.queryList()
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

